<template>
 <div class="typeComponent">
   <div class="type-item">文字</div>
   <div class="type-item">图片</div>
   <div class="type-item">视频<img src="../../../assets/images/wenhao.png"/></div>
   <div class="type-item">文件</div>
   <div class="type-item">链接</div>
   <div class="type-item">小程序</div>
   <div class="type-item">视频号</div>
   <div class="type-item">表情</div>
   <div class="type-item">素材库<img src="../../../assets/images/wenhao.png"/></div>
   <div class="type-item">群邀请<img src="../../../assets/images/wenhao.png"/></div>
 </div>
</template>
<script>
export default {
  name: "typeComponent"
}
</script>

<style scoped lang="scss">
.typeComponent {
  display: flex;
  align-items: center;
  min-height: 47px;
  padding: 8px 16px;
  line-height: 31px;
  display: flex;
  background: #f7f7f7;
  border: 1px solid #e9e9e9;
  margin-top: 10px;
  .type-item {
    height: 26px !important;
    font-size: 14px !important;
    padding: 0 7px;
    color: rgba(0, 0, 0, .65);
    border: 1px solid #e9e9e9;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    border-radius: 4px;
    cursor: pointer;
    img {
      margin-left: 5px;
    }
  }

}
</style>
